<template>
  <div class="wrapper">
    <div class="top">
      <div class="name">{{ $store.state.homeworkManageMenuData.name }}</div>
    </div>
    <div class="content">
      <div class="desc">
        {{ $store.state.homeworkManageMenuData.description }}
      </div>
      <div class="code">
        <CodeContainer
          @input="codeChange"
          @language-change="languageChange"
          :res="res"
        ></CodeContainer>
      </div>
    </div>
  </div>
</template>
<script>
import { URL } from '../api/api.js'
import CodeContainer from '../components/homeworkManage/codeContainer.vue'
export default {
  name: 'contentTem',
  components: { CodeContainer },
  data() {
    return {
      URL: URL,
      codeContent: null,
      language: 0, //0 py 1 c++ 2 java
      res: '请运行或提交代码查看结果',
    }
  },
  mounted() {
    this.axios.defaults.headers.common[
      'Authorization'
    ] = window.sessionStorage.getItem('token')
    //登录
    setInterval(() => {
      if (window.sessionStorage.getItem('account')) {
        this.login()
      }
    }, 60000)
  },
  methods: {
    login() {
      this.axios
        .post('/user/login/', {
          username: window.sessionStorage.getItem('account'),
          password: window.sessionStorage.getItem('password'),
        })
        .then(res => {
          window.sessionStorage.setItem('token', 'JWT ' + res.token)
          this.$store.dispatch('saveUserKey', res.info.key)
        })
    },
    codeChange(codeData) {
      this.codeContent = codeData.code
      //发请求
      this.axios
        .post('/assess/submit/', {
          key: this.$store.state.userKey,
          code: this.codeContent,
          code_type: this.language,
          work_key: this.$store.state.homeworkManageMenuData.key,
        })
        .then(res => {
          if (res) this.res = res
        })
    },
    languageChange(language) {
      switch (language) {
        case 'python':
          this.language = 0
          break
        case 'java':
          this.language = 2
          break
        case 'c++':
          this.language = 1
          break
        default:
          break
      }
    },
  },

  computed: {},
  watch: {},
}
</script>

<style lang="scss">
.wrapper {
  display: flex;
  flex-direction: column;
  .top {
    width: 100%;
    background-color: #fff;
    .name {
      font-size: 20px;
      padding: 18px;
    }
  }
  .content {
    padding: 20px;
    padding-top: 0;
    .desc {
      font-size: 18px;
      margin: 20px 0;
    }
  }
  .bottom {
  }
}
</style>
